<template>
	<view :class="lang">
		<u-navbar :is-fixed="true" :title="$t('ucenters.关于我们')" back-icon-name="arrow-leftward">
			<view class="slot-wrap greenbg heigh150">
				<view class="u-navbar-centent-slot">
					<!-- <text>购卡中心</text> -->
				</view>
			</view>
		</u-navbar>
		<view class="about" :class="lang+'layout'">
			<view class="logo">
				<image src="../../static/logo.png"></image>
			</view>
			<view class="aboutnav border-top">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.扫码下载')" :bold="false" @click="qcodeshow()"
						:sub-title="$t('ucenters.点开查看二维码')" :showLine="false"></u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.微信小程序')" @click="openmini" :bold="false" :sub-title="$t('ucenters.微信中打开')"
						:showLine="false"></u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.抖音账号')" :bold="false"  @click="copys('抖音账号','通用驾考')" sub-title="通用驾考" :showLine="false">
					</u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.电脑版下载')"  @click="copys('电脑版下载','www.tongyongjiakao.com')" :bold="false" sub-title="www.tongyongjiakao.com"
						:showLine="false"></u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.交管12123')" :bold="false" :sub-title="$t('ucenters.打开应用')"
						:showLine="false"></u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.隐私政策')"  @click="userxy" :bold="false" :sub-title="$t('ucenters.通用驾考用户协议隐私政策')"
						:showLine="false"></u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.版本更新')" @click="banben" :bold="false"
						:sub-title="$t('ucenters.点击查看最新版本')" :showLine="false"></u-section>
				</view>
			</view>
			<view class="aboutnav">
				<view class="aboutmuen">
					<u-section :title="$t('ucenters.意见反馈')" @click="books" :bold="false"
						:sub-title="$t('ucenters.写你的意见')" :showLine="false"></u-section>
				</view>
			</view>
		</view>
		<u-popup mode="center" v-model="qrshow" :closeable="closetrue">
			<view class="contentqr">
				<view class="qcodeview">
					<!-- <image src="../../static/logo.png"></image> -->
					<image :src="localinfo.erweimaxiazai"></image>
				</view>
				<view class="qcodedown">
					<button @click="qcodedown">下载二维码</button>
				</view>
			</view>
		</u-popup>
		<!-- #ifdef APP-PLUS -->
		<yomol-upgrade  :type="upgradeType" :url="upgradeUrl" title="发现新版本" :content="upgradeContent" ref="yomolUpgrade"></yomol-upgrade>
		<!-- #endif -->
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	import {
		isOpen,
		openDb,
		addTab,
		mergeSql,
		getDataList,
		addTabItem,
		closeSQL,
		deleteInformationType,
		getTable,
		getCount,
		updateSQL,
		isTable,
		selectDataList
	} from '@/js_sdk/lyz-sqlite/index.js';
	//app更新组件
	
	import yomolUpgrade from '@/components/yomol-upgrade/yomol-upgrade.vue'
	//#endif
	//接口
	import {
		about_api //关于我们
	} from '@/api/index';
	export default {
		components: {
			//#ifdef APP-PLUS
			yomolUpgrade //升级组件
			//#endif
		},
		data() {
			return {
				lang: this.$i18n.locale,
				siteurl: '', //官网网址
				appinfo: {}, //网络信息
				localinfo: {}, //本地信息
				qrshow: false,
				closetrue:true,
				
				upgradeType: 'pkg', //pkg 整包 wgt 升级包
				upgradeContent: '', //更新内容
				upgradeUrl: '', //更新地址
			}
		},
		onLoad() {
			var that = this;
			//判断网络状态
			that.abinit();
			
		},
		methods: {
			
			copys(textval,value){
			  //提示模板
			  uni.showModal({
			    content:textval+'：'+value,//模板中提示的内容
			    confirmText:'复制',
			    success:()=>{//点击复制内容的后调函数
			      //uni.setClipboardData方法就是讲内容复制到粘贴板
			      uni.setClipboardData({
			        data:value,//要被复制的内容
			        success:()=>{//复制成功的回调函数
			          uni.showToast({//提示
			            title:'复制成功'
			          })
			        }
			      });
			    }
			  });
			},
			userxy(){
				console.log("userxy--")

				uni.navigateTo({
				    url: '../template/user'
				});
			},
			
			openmini(){
				console.log("open weixn")
				plus.share.getServices(function(res = []){
				                const sweixin = res.find(_ => _['id'] === 'weixin')
				                if (sweixin) {
				                    sweixin.launchMiniProgram({  // 微信小程序的ID
				                        id: 'gh_424f35c8690a',
				                        type: 0
				                    });  
				                }
				            }, function(res){  
				            }); 
			},
			qcodeshow(){
				var that = this;
				that.qrshow = true;
			},
			qcodedown() {
				var that = this;
				var url = that.localinfo.erweimaxiazai;
				uni.showLoading({
					mask: true,
					title: "图片保存中"
				})
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									console.log('save success');
								}
							});
						}
					}
				});
				that.qrshow = false;

			},
			abinit() {
				var that = this;
				//判断网络状态
				uni.getNetworkType({
					success: res => {
						console.log("network--=", res);
						if (res.networkType == 'none') {
							//this.isConnected = false;  没有网络
							// #ifdef APP-PLUS
							//打开本地数据库
							if (isOpen('data')) {
								//数据库已打开
								console.log('数据库已打开');
								that.liteabout(); //获取离线信息
							} else {
								//数据库没有打开  先打开
								console.log('数据库未打开');
								that.openDb();
							}
							// #endif
						} else {
							//this.isConnected = true;   有网络
							//#ifdef APP-PLUS
							that.openDbs();
							// #endif
							that.aboutdata();
						}
					}
				});
			},
			openDbs() {
				var that = this;
				if (isOpen('data')) return;
				openDb('data').then(res => {
					console.log(res);
					//that.liteabout();
				});
			},
			//打开数据库
			openDb() {
				var that = this;
				if (isOpen('data')) return;
				openDb('data').then(res => {
					console.log(res);
					that.liteabout();
				});
			},
			liteabout: function() {
				var that = this;

				//读取本地数据
				var sql = "SELECT *  FROM about  WHERE id = 1;";
				// var danxuan = "";
				// var panduan = "";
				// var duoxuan = "";
				plus.sqlite.selectSql({
					name: 'data',
					sql: sql,
					success(est) {
						console.log("sssssssssssssss", est.length);
						console.log(sql);
						//console.log(est);
						//that.apinfo = est;
						that.localinfo = est[0];
						console.log("est[0]", est[0])
					},
					fail(err) {
						console.log(err);

					}
				});
			},
			banben: function() {
				var that = this;
				// #ifdef APP-PLUS
				// 获取手机系统信息
				
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				    var platform = uni.getSystemInfoSync().platform
				    //根据当前平台去后台检测版本号
				    //这是我的逻辑，可自定义
					console.log(platform,widgetInfo)
					
							var apinfo = that.appinfo;
							//我的后台会返回一个安装包地址（pkgUrl），升级包地址（wgtUrl）
							//判空来判断是非是整包升级还是资源包升级
							//content是版本更新内容 \n换行
							//ios用户pkgUrl是苹果市场App地址，android自定义下载地址
							console.log(apinfo.version,"------", widgetInfo.version)
							if (apinfo.version !== undefined || apinfo.version == "") {
							if(apinfo.version > widgetInfo.version){
								if (apinfo.downurl != '') {
								    this.upgradeType = 'pkg'
								    this.upgradeContent = apinfo.desc
								    this.upgradeUrl = apinfo.downurl
								    this.$refs.yomolUpgrade.show()
								}
							}else{
								uni.showModal({
									title: '提示',
									content: '目前版本最新版本，不需要更新',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
							} else {
								uni.showModal({
									title: '提示',
									content: '您还没联网，联网后再试',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
										that.abinit();
									}
								});
							}
							
							//uni.hideLoading();
						
					
				});
				
				
				
				
				// #endif
			},
			aboutdata: function() {
				var that = this;
				that.https({
					url: about_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						//console.log(res);
						//#ifdef APP-PLUS
						//修改本地数据
						updateSQL('data', 'about', res, 'id', '1').then(res => {
							console.log('1111');
							console.log("db res", res);

						})
						//#endif
						that.appinfo = res;
						that.localinfo = res;
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			books: function() {
				uni.navigateTo({
					url: '../feedback/feedback?type=book&fankuitype=0'
				});
			}
		}
	}
</script>

<style>
	.contentqr {
		width: 700rpx;
		height: 800rpx;
		margin: 0 auto;
	}

	.qcodeview {
		width: 600rpx;
		height: 600rpx;
		margin: 90rpx auto 20rpx auto;
	}
	.qcodeview image{
		width: 600rpx;
		height: 600rpx;
	}

	.qcodedown {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 10rpx auto 0 auto;
	}
	.qcodedown button{
		background: #0BD34E;
		color: #FFFFFF;
	}

	.about {
		width: 750rpx;
		display: block;
	}

	.aboutnav {
		width: 750rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.aboutmuen {
		width: 700rpx;
		margin: 0 auto;
	}

	.kzlayout .uicon-arrow-right:before {
		content: "\e60e" !important;
	}

	.kzlayout .u-section__right-info__icon-arrow {
		margin-left: 2rpx;
		margin-right: 10rpx;
		margin-top: -10rpx;
	}

	.uylayout .uicon-arrow-right:before {
		content: "\e60e" !important;
	}

	.uylayout .u-section__right-info__icon-arrow {
		margin-left: 2rpx;
		margin-right: 10rpx;
		margin-top: -10rpx;
	}

	.border-top {
		border-top: 1rpx solid #ededed;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		margin: 100rpx auto;
	}

	.logo image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 15rpx;
	}
</style>
